<template>
  <el-tooltip :content="tooltip" :disabled="!tooltip" placement="top">
    <div
      class="icon-btn f-row f-align--center cursor-pointer"
      :class="[icon, { border: borderHighlight }]"
      @click="$emit('click', $event)"
    >
      <svg-icon :type="`${iconPrefix}${icon}`" :size="iconSize"></svg-icon>
    </div>
  </el-tooltip>
</template>
<script>
export default {
  name: "IconBtn",
  props: {
    iconPrefix: {
      type: String,
      default: "theme-btn-",
    },
    icon: {
      require: true,
      default: "",
    },
    iconSize: {
      type: [String, Number],
      default: "24",
    },
    tooltip: {
      type: String,
      default: "",
    },
    borderHighlight: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="scss" scoped>
.icon-btn {
  display: inline-block;
  padding: 3px 4px;
  border: 1px solid rgba(22, 93, 255, 0.1);
  background: #ffffff;
  border-radius: var(--theme-border-radius);
  & + .icon-btn {
    margin-left: 12px;
  }
  .svg-icon {
    color: var(--theme-color-primary);
  }
  &:hover {
    background: #ecf2fd;
  }
  &.border {
    border-color: var(--theme-color-primary);
  }
  &.delete {
    .svg-icon {
      color: var(--theme-color-error);
    }
    &:hover {
      background: #fdecec;
      border-color: rgba(244, 60, 60, 0.1);
    }
    &.border {
      &:hover {
        border-color: var(--theme-color-error);
      }
    }
  }
}
</style>
